<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: YuanJun
 * @Date: 2020-05-24 01:04:20
 * @LastEditors: YuanJun
 * @LastEditTime: 2020-05-24 09:03:34
-->
<!DOCTYPE html>
<html>

<head>
  <meta
    http-equiv="Content-Type"
    content="text/html; charset=utf-8"
  >
  <title>register</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <style>
    body {
      width: 100%;
      height: 100%;
      background: #c5cbee;
    }

    .box {
      display: flex;
      /* align-items: center;
    justify-items: start; */
      flex-direction: column;
      margin: 100px auto;
      width: 34%;
      height: 320px;
      background: #abb5eb;

    }

    .box>header {
      width: 100%;
      height: 48px;
      line-height: 48px;
      text-align: center;
      color: #ffffff;
      font-size: 18px;
      background: #97a3e9;
      font-weight: 500;
    }

    label {
      width: 75px;
      text-align: right;
      line-height: 48px;
      height: 48px;
      margin-right: 12px;
    }

    .inputItem {
      display: flex;
      align-items: center;
      height: 48px;
    }

    .inputBox {
      margin: 16px auto;
    }

    input {
      height: 24px;
      width: 202px;
      background: #e0e3f5;
      outline: none;
      border: 1px solid #c5cbee;
      border-radius: 4px;
    }

    .inputItem:last-child {
      position: absolute;
    }

    .feachBtn {
      border: 0;
      /* display: inline-block; */
      height: 26px;
      line-height: 26px;
      width: 120px;
      text-align: center;
      background: #ffffff;
      color: #97a3e9;
      position: relative;
      top: 0px;
      right: 121px;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
    }

    .feachBtn:disabled {
      cursor: not-allowed;
    }

    .inputBox>button {
      width: 76%;
      height: 36px;
      line-height: 36px;
      margin-left: 42px;
      margin-top: 16px;
      border: none;
      border-radius: 4px;
      background: #97a3e9;
      font-size: 18px;
      color: #ffffff;
    }
  </style>


</head>

<body>
  <div class="box">
    <header>账户注册</header>
    <div class="inputBox">
      <div class="inputItem">
        <label>邮箱</label><input
          id="email"
          type="text"
          name="email"
        >
      </div>
      <div class="inputItem">
        <label>密码</label> <input
          id="password"
          type="password"
          name="password"
        >
      </div>
      <div class="inputItem">
        <label>确认密码</label><input
          type="password"
          name="confirmPassword"
        >
      </div>
      <div class="inputItem">
        <label>验证码 </label><input
          id="code"
          type="text"
          name="code"
        > <button class="feachBtn">获取验证码</button>
      </div>
      <button
        type="button"
        id="btn"
      > 注册</button>
    </div>

  </div>
  <script type="text/javascript">
    let idCodeStatus = false
    /**注册按钮*/
    $('#btn').click(() => {
      console.log('可以进来吗');
      let email = $('#email').val();
      let password = $('#password').val();
      let code = $('#code').val();
      $.ajax({
        //请求方式
        type: "GET",
        //请求的媒体类型
        url: `http://127.0.0.1/api/user/register/${email}/${password}/${code}`,
        //请求成功
        success(result) {
          if (result == false) {
            alert('注册失败 参数或者验证码错误')
          } else location.href = `./index.html?email=${email} `;
        },
        //请求失败，包含具体的错误信息
        error(e) {
          alert(e.responseText);
        }
      });
    })


    /**获取验证码*/
    $('.feachBtn').click(() => {
      let email = $('#email').val()
      if (idCodeStatus) return
      $.ajax({
        //请求方式
        type: "GET",
        //请求的媒体类型
        url: `http://127.0.0.1/api/code/create/${email}`,
        //请求成功
        success(result) {
          alert('验证码获取成功，登陆邮箱查看');
        },
        //请求失败，包含具体的错误信息
        error(e) {
          alert(e.responseText);
        }
      });

      let count = 60;
      idCodeStatus = true
      const timer = setInterval(() => {
        count--;
        if (count === 0) {
          idCodeStatus = false
          $('.feachBtn').text('重新发送').removeAttr('disabled');
          clearInterval(timer);
        } else {
          $('.feachBtn').text(count + '秒后可重新获取').attr('disabled', true);
        }
      }, 1000);

    });
  </script>
</body>

</html>